<template>
  <div class="sign_box">
    <div class="mark">
      <h3>注册</h3>
      <div>
        账号：<input type="text" placeholder="输入账号" v-model="username" />
      </div>
      <div>
        密码：<input type="text" placeholder="输入密码" v-model="password" />
      </div>
      <div>
        确认密码：<input
          type="text"
          placeholder="确认密码"
          v-model="okpassword"
        />
      </div>
      <button @click="() => btn()">注册</button>
      <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
        <p>注册成功是否跳转登录页</p>
      </a-modal>
    </div>
  </div>
</template>

<script setup lang="ts">
//引入vue 方法
import { ref, watch,computed } from "vue";
//antd
import { message } from "ant-design-vue";
4;
//大菠萝全局状态管理工具
import { storeToRefs } from "pinia";
import { useLogin } from "../store/login";
//路由
import { useRouter } from "vue-router";
const router = useRouter();
//解析大菠萝
const logins = useLogin();
let { issign } = storeToRefs(logins);

const username = ref(""),
  password = ref(""),
  okpassword = ref("");
//点击注册
const btn = () => {
  // 判断密码是否一致
  // 判断是否输入账号密码
  if (username.value == "") return message.info("请输入账号");
  if (password.value == "") return message.info("请输入密码");
  if (password.value !== okpassword.value) return message.info("密码不一致");
  logins.signuser({ username: username.value, password: password.value });
};
//监听是否注册成功 ，成功则跳转页面
watch(issign, (newVal, oldVal) => {
  if (newVal == "注册成功") {
     visible.value = true;
  }
});

const visible = ref<boolean>(false);

const showModal = () => {
 
};

const handleOk = (e: MouseEvent) => {
  console.log(e);
    router.push("/login");
  visible.value = false;
};
</script>

<style lang="scss">
.sign_box {
  width: 100vw;
  height: 100vh;
  background: url("../assets/lq.jpeg") no-repeat;
  background-size: 100% 100%;
  .mark {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 200px;
    background: pink;
    border-radius: 20px;
    opacity: 0.65;
    > div {
      margin: 13px 0;
      padding: 0 20px;
    }
    button {
      display: inline-block;
      margin: 0 auto;
      padding: 5px 20px;
    }
  }
}
</style>